import React from 'react'
import {Icon} from "antd-mobile";
import shareUrl from "../../../res/images/web/video/share备份@2x.png";
import thumbIcon from "../../../res/images/web/video/编组 19@2x.png";
import pinglunUrl from "../../../res/images/web/video/talk@2x.png";
import CommentItem from "../../topic-detail/CommentItem/CommentItem";

class VideoDetail extends React.Component {

    render() {
        const video = this.props.video
        const videoAtTop = this.props.videoAtTop
        
        const h = video.Heng !== 1
        const src = video.Url
        const title = video.Title
        const Titleimg = video.Titleimg
        

        const input = <div
            className={videoAtTop && h
                ? 'topic-detail-bottom-input topic-detail-bottom-input-hidden'
                : 'topic-detail-bottom-input'
            }
        >
            <input
                value={this.props.txt}
                onChange={(e) => this.props.onChange(e, 'txt')}
            />

            <div
                className='unlock-btn'
                onClick={(e) => this.props.comment({commentid: -1,})}
            >评论</div>
        </div>

        const comments= this.props.videoComments

        const commentList = comments.map((c, i) => {
            let end = c.end

            return <CommentItem
                comment={c}
                end={end}
                key={i}
                index={i}
                onReply={c => this.props.reply(c)}
                onReport={() => this.props.report(c)}
                onZan={() => this.props.zan({commentid: c.Id,}, c,)}
                level={1}
                fetchNextPage={this.props.fetchNextPage}
            />
        })

        const iconStyle = {
            width: 28,
            height: 28,
            zIndex: 201,
        }

        const videoT = <div
            style={{
                position: 'fixed',
                top: 0,
                left: 0,
                height: '100%',
                width: '100%',
                background: '#F8F8F8',
                zIndex: 200,
                overflowY: 'scroll',
            }}
            onScroll={this.props.onVideoScroll}
            ref={el => this.videoCtn = el}
        >


            <Icon
                type="left"
                size='lg'
                style={{
                    color: '#fff',
                    position: 'fixed',
                    top: '18px',
                    left: '18px',
                    zIndex: 201,
                }}
                onClick={() => {
                    this.setState({
                        select: false,
                        video: {},
                    })
                }}
            />

            <div
                className='flex-center-align-center'
                style={{
                    color: '#fff',
                    position: 'fixed',
                    top: '18px',
                    right: '18px',
                }}
            >
                <img src={shareUrl} alt='' style={{...iconStyle, marginRight: 12,}}/>
                <img src={thumbIcon} alt='' style={iconStyle}/>
            </div>

            <video
                style={{
                    width: '100%',
                    height: h ? 'calc(100 * var(--vh))' : 'auto',
                    // background: `url(${Titleimg}) center/cover`,
                    background: 'black',
                }}
                src={src}
                poster={Titleimg}
                controls
                ref={el => this.videoTag = el}
                // videoTag.current.setAttribute('playsinline', '')
                // videoTag.current.setAttribute('webkit-playsinline', '')
                // videoTag.current.setAttribute('x5-playsinline', '')
                // videoTag.current.setAttribute('x-webkit-airplay', 'allow')
                playsInline={true}
                webkit-playsinline={''}
                x5-playsinline={''}
                x-webkit-airplay='allow'
                // autoPlay
            />

            <div style={{padding: '16px 12px',}}>
                <p style={{fontSize: '16px', marginBottom: '10px',}}>{title}</p>
                <div className='flex'>
                    <div className='flex-align-center' style={{marginRight: 24,}}>
                        <img src={pinglunUrl} alt='' style={{width: 16, height: 16, marginRight: 3,}}/>
                        <span>123</span>
                    </div>
                    <div className='flex-align-center'>
                        <img src={pinglunUrl} alt='' style={{width: 16, height: 16, marginRight: 3,}}/>
                        <span>123</span>
                    </div>
                </div>

            </div>
            {commentList}
            {input}
        </div>

        return videoT
    }
}

export default VideoDetail
